{include file="public/header,public/nav,public/fixbar" title="订单详情-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-main min-height-80vh">
            <div class="layui-col-space15 order-detail">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg8">
                    <div class="step-section">
                        <div class="custom-steps">
                            <div class="layui-step">
                                <div class="layui-step-item active">
                                    <div class="layui-step-item-head">
                                        <i class="layui-icon">&#xe605;</i>
                                    </div>
                                    <div class="step-content">
                                        <div class="layui-step-item-title">创建订单</div>
                                        <div class="layui-step-item-desc">{$info.create_time|date="Y-m-d H:i:s"}</div>
                                    </div>
                                </div>
                                {if $info.status != 5}
                                <div class="layui-step-item {if $info.payment_time} active {/if}">
                                    <div class="layui-step-item-head">
                                        {if !$info.payment_time}
                                        <i class="layui-icon">2</i>
                                        {else}
                                        <i class="layui-icon">&#xe605;</i>
                                        {/if}
                                    </div>
                                    <div class="step-content">
                                        <div class="layui-step-item-title">买家付款</div>
                                        {if $info.payment_time}
                                        <div class="layui-step-item-desc">{$info.payment_time|date="Y-m-d H:i:s"}</div>
                                        {/if}
                                    </div>
                                </div>
                                {/if}
                                {if $info.user_address && $info.status != 5}
                                <div class="layui-step-item {if $info.send_time} active {/if}">
                                    <div class="layui-step-item-head">
                                        {if !$info.send_time}
                                        <i class="layui-icon">3</i>
                                        {else}
                                        <i class="layui-icon">&#xe605;</i>
                                        {/if}
                                    </div>
                                    <div class="step-content">
                                        <div class="layui-step-item-title">卖家发货</div>
                                        {if $info.send_time}
                                        <div class="layui-step-item-desc">{$info.send_time|date="Y-m-d H:i:s"}</div>
                                        {/if}
                                    </div>
                                </div>
                                {/if}
                                <div class="layui-step-item {if $info.status >= 4} active {/if}">
                                    <div class="layui-step-item-head">
                                        {if $info.status < 4}
                                        <i class="layui-icon">4</i>
                                        {elseif $info.status == 4}
                                        <i class="layui-icon">&#xe605;</i>
                                        {else}
                                        <i class="layui-icon">&#x1006;</i>
                                        {/if}
                                    </div>
                                    <div class="step-content">
                                        {if $info.status == 5}
                                        <div class="layui-step-item-title">交易取消</div>
                                        {elseif $info.status > 5}
                                        <div class="layui-step-item-title">售后退款</div>
                                        {else}
                                        <div class="layui-step-item-title">交易完成</div>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-panel" style="border: none;">
                        <h2>{$info.status_text}</h2>
                    </div>
                    {if $info.user_address}
                    <div class="layui-panel" style="margin-bottom: 15px;">
                        {if $info.express_info}
                            <div>
                                <i class="iconfont icon-express-package" style="font-size: 14px;margin-right: 5px;"></i>{$info.express_info.name}<span lay-separator="" style="margin:10px;color:#e2e2e2;">|</span>{$info.express_info.no}
                                <a href="javascript:;" class="layui-font-success" style="margin-left: 5px;">查看物流详情 <i class="layui-icon layui-icon-right layui-font-14"></i></a>
                            </div>
                        {/if}
                        <div style="margin-top: 8px;"><i class="layui-icon layui-icon-location" style="font-size: 14px;margin-right: 5px;"></i>{$info.user_address.region} {$info.user_address.address}</div>
                        <p style="color:#7a7a7a;margin-top: 5px;">{$info.user_address.name}，{$info.user_address.phone}</p>
                    </div>
                    {/if}
                    <div class="layui-card">
                        <div class="layui-card-body goods-spec-item">
                            {foreach $info.order_goods as $goods}
                            <a href="{$goods.href}">
                                <div class="item">
                                    <img class="user-goods-img" src="{$goods.img}">
                                    <div class="detail layui-ellip" style="width: 100%;">
                                        <div class="product-title space-between">
                                            <p class="layui-ellip">
                                                <span class="item-title-label">{$goods.product_type_text}</span>
                                                {$goods.product_name}
                                            </p>
                                            <div>￥{$goods.price}</div>
                                        </div>
                                        <div class="space-between" style="margin-top: 10px;color:#7a7a7a;">
                                            <p>规格：{$goods.attr_name}</p>
                                            <p>x{$goods.num}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <hr class="layui-order-gray">
                            {/foreach}
                        </div>
                    </div>
                    <div class="layui-row">
                        {if $info.status == 0}
                        <a class="layui-btn layui-btn-primary cancel" data-id="{$info.id}">取消订单</a>
                        <a class="layui-btn layui-bg-success continue-pay" data-id="{$info.id}">继续支付</a>
                        {/if}
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg4">
                    <div class="layui-card">
                        <div class="layui-card-header">付款详情</div>
                        <div class="layui-card-body layui-font-16">
                            <div class="space-between">
                                <p class="item-info-left">商品总价</p>
                                <p class="item-info-right layui-font-black"><span class="symbol">￥</span><b>{$info.order_price}</b></p>
                            </div>
                            {if $info.shipping_fee > 0}
                            <div class="space-between">
                                <p class="item-info-left">运费(快递)</p>
                                <p class="item-info-right layui-font-black"><span class="symbol">￥</span><b>{$info.shipping_fee}</b></p>
                            </div>
                            {/if}
                            <div class="space-between">
                                <p class="item-info-left">折扣优惠</p>
                                <p class="item-info-right layui-font-red">减 <span class="symbol">￥</span><b>{$info.discount}</b></p>
                            </div>
                            <div class="space-between">
                                <p class="item-info-left">实付款</p>
                                <p class="item-info-right layui-font-red"><span class="symbol">￥</span><b class="layui-font-24">{$info.pay_price}</b></p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">订单信息</div>
                        <div class="layui-card-body">
                            <div class="space-between">
                                <p class="item-info-left">订单编号</p>
                                <p class="item-info-right">
                                    {$info.order_no}
                                    <span lay-separator="" style="margin:5px;color:#e2e2e2;">|</span>
                                    <a href="javascript:;" class="copy" data-no="{$info.order_no}">复制</a>
                                </p>
                            </div>
                            {if $info.user_address}
                            <div class="space-between">
                                <p class="item-info-left">收货信息</p>
                                <p class="item-info-right">{$info.user_address.name}，{$info.user_address.phone} {$info.user_address.region} {$info.user_address.address}</p>
                            </div>
                            {/if}
                            <div class="space-between">
                                <p class="item-info-left">订单备注</p>
                                <p class="item-info-right">{$info.customer_notes ? $info.customer_notes : '--'}</p>
                            </div>
                            {if $info.payment_no}
                            <div class="space-between">
                                <p class="item-info-left">支付方式</p>
                                <p class="item-info-right">{$info.pay_type_text}</p>
                            </div>
                            <div class="space-between">
                                <p class="item-info-left">交易单号</p>
                                <p class="item-info-right">{$info.payment_no ?? '--'}</p>
                            </div>
                            {/if}
                            <div class="space-between">
                                <p class="item-info-left">下单时间</p>
                                <p class="item-info-right">{$info.create_time|date="Y-m-d H:i:s"}</p>
                            </div>
                            {if $info.payment_time}
                            <div class="space-between">
                                <p class="item-info-left">付款时间</p>
                                <p class="item-info-right">{$info.payment_time|date="Y-m-d H:i:s"}</p>
                            </div>
                            {/if}
                            {if $info.send_time}
                            <div class="space-between">
                                <p class="item-info-left">发货时间</p>
                                <p class="item-info-right">{$info.send_time|date="Y-m-d H:i:s"}</p>
                            </div>
                            {/if}
                            {if $info.cansel_time}
                            <div class="space-between">
                                <p class="item-info-left">取消时间</p>
                                <p class="item-info-right">{$info.cansel_time|date="Y-m-d H:i:s"}</p>
                            </div>
                            {/if}
                            {if $info.cansel_text}
                            <div class="space-between">
                                <p class="item-info-left">取消原因</p>
                                <p class="item-info-right">{$info.cansel_text}</p>
                            </div>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-font-16 margin-top-40 margin-bottom-15 font-weight-bold">
                    <i class="layui-icon layui-icon-fire layui-font-16 padding-right-5 layui-font-red"></i>
                    推荐商品
                </div>
                <div class="layui-col-space25">
                    {foreach $list as $v}
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                            <a href="{$v.href}">
                                <div class="layui-card product-item">
                                    <div class="layui-card-body">
                                        <div class="item">
                                            {if $v.product_type == 1}
                                            <img src="{$v.head_imgs}" class="user-goods-img">
                                            {elseif $v.product_type == 10}
                                            <div class="justify-content-center">
                                                <img style="background-color: {$v.background_color};margin-right: 0px;" src="{$v.head_imgs}" class="user-goods-img">
                                                <span class="exam-sub-title">{$v.sub_title}</span>
                                            </div>
                                            {else}
                                            <img src="{$v.head_imgs}" class="user-course-img">
                                            {/if}
                                            <div class="detail">
                                                <div class="product-title layui-ellipss">
                                                    <span class="item-title-label">{$v.product_type_text}</span>{$v.name}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-card-footer">
                                        <p class="text">已售 <b>{$v.virtual_sales+$v.real_sales}</b></p>
                                        {if $v.sale_price == 0}
                                        <p class="product-price layui-font-16">免费</p>
                                        {else}
                                        <p class="product-price layui-font-16"><span class="symbol">￥</span>{$v.sale_price}</p>
                                        {/if}
                                    </div>
                                </div>
                            </a>
                        </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','layer'], function(){
        var layer = layui.layer, flow = layui.flow, $=layui.jquery;

        // 复制订单号
        $(".copy").on('click',function(){
            var no = $(this).data('no');
            var $temp = $('<input>');
            $('body').append($temp);
            $temp.val(no).select();
            document.execCommand('copy');
            $temp.remove();
            layer.msg('复制成功',{icon: 1});
        });

        // 取消订单
        $(document).on('click', '.cancel',function(){
            var id = $(this).data('id');
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '取消订单',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['450px', '500px'],
                content: '/user/cancel_order?id='+id
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })

        // 继续支付
        $(".continue-pay").click(function(){
            var id = $(this).data('id');
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '选择支付方式',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['800px', '600px'],
                content: '/order/continue_pay?order_id='+id
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })
    });
</script>
